<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom)+'px'}">
		<navbar></navbar>
		<view class="form" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="form-main">
				
	<view class="form-header">
		<view class="form-header-title">
			个人信息
		</view>
		<view class="form-header-tag">
			已审核
		</view>
	</view>
	<view class="registerClient">
		<text class="title">您的姓名</text>
		<view class="inp">
			<van-field v-model="info.name" name="pattern" placeholder="请输入名字" :error-message="error.name" />
		</view>


		<text class="title">性别</text>
		<view class="genderCheckBox">
			<van-radio-group v-model="info.sex" direction="horizontal" :error-message="error.sex">
				<van-radio name="男">男</van-radio>
				<van-radio name="女">女</van-radio>
			</van-radio-group>
		</view>
		
		<text class="title">出生日期</text>
		<view class="selectVant">
			<uni-datetime-picker type="date" v-model="info.birthday" />
		</view>
		
		<!-- <text class="title">岗位类别</text>
		<view class="selectVant" @click="pickerShow('hangye')">
			<van-field readonly clickable name="zpyx" v-model="info.hangye" placeholder="请选择"
				:error-message="error.hangye" />
		</view>
		
		<text class="title">求职意向</text>
		<view class="selectVant" @click="pickerShow('gangwei')">
			<van-field readonly clickable name="zpyx" v-model="info.gangwei" placeholder="请选择"
				:error-message="error.gangwei" />
		</view> -->

		<text class="title">您的学历</text>
		<view class="selectVant" @click="pickerShow('education')">
			<van-field readonly clickable name="zpyx" v-model="info.education" placeholder="请选择您的学历"
			  :error-message="error.education" disabled />
		</view>
		
		<text class="title">工作经验</text>
		<view class="selectVant" @click="pickerShow('workExperience')">
			<van-field readonly clickable name="zpyx" v-model="info.workExperience" placeholder="请选择您的工作经验"
			  :error-message="error.workExperience" disabled />
		</view>

		<text class="title">您的学校</text>
		<view class="inp">
			<van-field v-model="info.school" name="pattern" placeholder="请输入您的学校" :error-message="error.school" />
		</view>

		<text class="title">您的专业</text>
		<view class="inp">
			<van-field v-model="info.major" name="pattern" placeholder="请输入您的专业" :error-message="error.major" />
		</view>

		<text class="title">微信号</text>
		<view class="inp">
			<van-field v-model="info.wechat" name="pattern" placeholder="请输入您的微信号" :error-message="error.wechat" />
		</view>
		
		<text class="title require">所在城市</text>
		<view class="selectVant mb10" @click="pickerShow('area')">
			<van-field readonly clickable name="area" v-model="info.city" placeholder="点击选择省市区"
				:error-message="error.city" :right-icon="imgUrl + 'under.png'" />
		</view>
		
		<text class="title">个人简介</text>
		<view class="textareaVant">
			<van-field v-model="info.cnt" rows="4" autosize type="textarea" placeholder="请输入文字描述"
				:error-message="error.cnt" input-class="textareaInp" />
		</view>
		
		<text class="title">个人技能</text>
		<view class="textareaVant">
			<van-field v-model="info.jineng" rows="4" autosize type="textarea" placeholder="请输入文字描述"
				:error-message="error.jineng" input-class="textareaInp" />
		</view>


		<text class="title">手机号（登录账号）</text>
		<view class="inp mb10">
			<van-field v-model="info.tel" name="pattern" placeholder="请填写手机号" :error-message="error.tel" />
		</view>

		<!-- <view class="inpBox">
			<view class="inp mb10">
				<van-field v-model="graphicsCodeVal" center clearable placeholder="请输入图形验证码" />
			</view>
			<view class="graphicsCodeBox" @click="updateGraphicsCode">
				<canvas canvas-id="graphicsCodeCanvas" id="graphicsCodeCanvas"></canvas>
			</view>
		</view> -->

		<view class="inpBox">
			<view class="inp">
				<van-field v-model="info.code" name="pattern" placeholder="请输入验证码"
					:error-message="error.code" />
			</view>
			<view class="getCodeBox">
				<view class="btn" :class="{'disabled':isSend}" @click="sendCode">{{sendTitle || '获取验证码'}}</view>
			</view>
		</view>

		<view class="formItem">
			<button class="submit" @click="submit">确认提交</button>
		</view>

		<!-- 地址Select -->
		<van-popup position="bottom" :show="areaShowPicker" style="z-index: 110;">
			<van-area :areaList="areaList" @confirm="selectQydz" @cancel="onCelcel('area')" />
		</van-popup>
		<!-- 公共Select -->
		<picker-view ref="pickerRef" :list="columns" @confirm="onConfirm"></picker-view>
	</view>

	</view>
		</view>
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import {
		Mcaptcha
	} from '@/utils/mcaptcha'
	import Navbar from '@/components/Navbar.vue';
	import {
		sendCodeFunc
	} from "@/core/web-api/login.js"
	import {
		areaList
	} from '@/node_k/area-data/areadata.js';
	import {
		getMyInfo,updateMyInfo
	} from "@/core/web-api/qiuzhiduan.js"
	import PickerView from "@/components/PickerView.vue"
	import {validateFunc} from "@/utils/util.js"
	import {getData} from "@/core/web-api/common.js"
	export default {
		components:{
			PickerView,Navbar
		},
		props:{
			openid:{
				type:String,
				default(){
					return ""
				}
			}
		},
		data() {
			return {
				info: {
					avatar:"",
					birthday: "",
					code: "",
					education: "",
					major: "",
					name: "",
					school: "",
					sex: "",
					tel: "",
					openid:"",
					gangwei:"",
					hangye:"",
					wechat:"",
					cnt:"",
					jineng:"",
					city:"",
					province:"",
					workExperience:"",
				},
				time: 59,
				timer: null,
				sendTitle: "",
				isSend: false,
				error: {
					avatar:"",
					birthday: "",
					code: "",
					education: "",
					major: "",
					name: "",
					school: "",
					sex: "",
					tel: "",
					openid:"",
					gangwei:"",
					hangye:"",
					wechat:"",
					cnt:"",
					jineng:"",
					city:"",
					province:"",
					workExperience:"",
				},
				mcaptcha:null,
				graphicsCodeVal:"",
				optionsMap:{
					gangweiColumns:[],
					hangyeColumns:[],
					educationColumns:[],
					workExperienceColumns:[],
				},
				type:"",
				columns:[],
				areaList: areaList,
				areaShowPicker: false,
			}
		},
		onReady() {
			this.mcaptcha = new Mcaptcha({
				el: 'graphicsCodeCanvas',
				width: 80,
				height: 35,
				createCodeImg: "",
				instance: this
			});
		},
		methods: {
			/**
			 * 发送验证码
			 */
			sendCode() {
				console.log(this.info.tel)
				let code = validateFunc(this.info.tel, 'tel')
				if (code != 2) {
					uni.showToast({
						title: code == 0 ? "请输入手机号码" : "手机号码格式错误",
						icon: "none"
					})
					return;
				}
				let grapValid = this.grapValid();
				if (!grapValid) return;
				if (this.isSend) return;
				this.isSend = true;
				this.sendTitle = `${this.time}秒后重发`
				this.sendTel();
				this.timer = setInterval(() => {
					this.time--;
					this.sendTitle = `${this.time}秒后重发`
					if (this.time == 0) {
						clearInterval(this.timer);
						this.time = 60;
						this.isSend = false;
						this.sendTitle = "";
					}
				}, 1000)
			},
			/**
			 * 发送手机号验证码
			 */
			sendTel() {
				sendCodeFunc({
					phone: this.info.tel,
					type: "reg"
				}).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: "发送成功"
						})
					}
				})
			},
			/**
			 * 弹出弹窗
			 * @param {Object} type
			 */
			pickerShow(type) {
				this.type = type;
				if (type != 'area') {
					this.columns = this.optionsMap[type + "Columns"];
				}else{
					this.areaShowPicker = true;
					return;
				}
				if (type == 'gangwei') {
					if (!this.optionsMap.gangweiColumns || this.optionsMap.gangweiColumns.length == 0) {
						uni.showToast({
							title: "请选择岗位类别",
							icon: "none"
						})
						return;
					}
					this.$refs.pickerRef.open();
				} else{
					this.$refs.pickerRef.open();
				}
			},
			onConfirm() {
				let value = this.$refs.pickerRef.value;
				if (this.type == 'hangye') {
					this.info.hangye = value;
					let index = this.optionsMap.hangyeColumns.findIndex(f => f.sort == value);
					this.optionsMap.gangweiColumns = this.optionsMap.hangyeColumns[index].datasetTreeVos;
				}
				this.info[this.type] = value
			},
			onCelcel(type) { 
				this.areaShowPicker = false;			 
			},
			/**
			 * 切换图形验证码
			 */
			updateGraphicsCode() {
				this.mcaptcha.refresh()
			},
			/**
			 * 验证码验证
			 */
			grapValid() {
				// if (!this.graphicsCodeVal) {
				// 	uni.showToast({
				// 		title: '请输入图形验证码',
				// 		icon: "none"
				// 	})
				// 	return false;
				// }
				// if (this.graphicsCodeVal.toLowerCase() != this.mcaptcha.options.createCodeImg.toLowerCase()) {
				// 	uni.showToast({
				// 		title: '图形验证码错误',
				// 		icon: "none"
				// 	})
				// 	return false;
				// }
				return true;
			},
			/**
			 * 选择地址
			 */
			selectQydz({
				values
			}) {
				this.info.city = values
					.filter((item) => !!item)
					.map((item) => item.name)
					.join('/');
				this.info.province = this.info.city?this.info.city.split("/")[0]:""
				this.areaShowPicker = false;
			},
			/**
			 * 提交
			 */
			submit() {
				let grapValid = this.grapValid();
				if (!grapValid) return;
				let valid = this.validate();
				if (!valid) {
					uni.showToast({
						title: "有必填项未填",
						icon: "none"
					})
					return;
				}
				const data = JSON.parse(JSON.stringify(this.info));
				updateMyInfo(data).then(res => {
					
					if (res.code == 20000) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					})
				})
			
			},
			validate() {
				const dist = {
					code: "验证码",
					education: "学历",
					major: "专业",
					name: "姓名",
					school: "学校",
					sex: "性别",
				}
				let flag = true;
				for (let key in dist) {
					let code = validateFunc(this.info[key], key);
					if (code == 0) {
						flag = false;
						this.error[key] = dist[key] + "为必填项"
					} else if (code == 1) {
						flag = false;
						this.error[key] = dist[key] + "格式错误"
					} else if (code == 2) {
						this.error[key] = "";
					}
				}
				return flag;
			},
			/**
			 * 获取下级筛选
			 */
			getCataList() {
				let cataNames = ['学历', '所属行业','工作经验'];
				let cataList = ['educationColumns','hangyeColumns','workExperienceColumns']
				getData({
					sortList: cataNames
				}).then(res => {
					console.log(res);
					let {
						list
					} = res.data;
					list.forEach(item => {
						let index = cataNames.findIndex(f => f == item.sort);
						this.optionsMap[cataList[index]] = item.list;
					})
					this.optionsMap.educationColumns = this.optionsMap.educationColumns.filter(a=>!a.sort.includes("不限"))
					this.optionsMap.workExperienceColumns = this.optionsMap.workExperienceColumns.filter(a=>!a.sort.includes("不限"))
				})
			},
			getIterative(arrs) {
				let arr = [];
				arrs.forEach(item => {
					arr[item.sort] = item.list.map(f => f.sort);
				})
				return arr;
			},
			/**
			 * 获取企业信息
			 */
			getUserInfo() {
				getMyInfo().then(res => {
					if (res.code == 20000) {
						this.getIterator(res.data.detail);
					}
				})
			},
			/**
			 * 循环赋值
			 * @param {Object} obj
			 */
			getIterator(obj) {
				for (let key in this.info) {
					this.info[key] = obj[key];
				}
			}
		},
		watch: {
			userInfo: {
				deep: true,
				immediate: true,
				handler(obj) {
					if (!obj || Object.keys(obj).length == 0) return;
					this.getIterator(obj);
				}
			}
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['userInfo', 'baseImage'])
		},
		created() {
			this.getCataList();
			if (!this.userInfo || Object.keys(this.userInfo).length == 0) {
				this.getUserInfo()
			}
		}
	}
</script>

<style scoped lang="less">
	
	.br {
		margin-bottom: 20upx;
	}
	
	.inp2 {
		display: inline-block;
		width: 200rpx;
		vertical-align: middle;
	}
	
	.inp2:first-child {
		margin-right: 7rpx;
	}
	
	.inpP {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
	}
	
	.inpBox {
		width: 100%;
		background: #FFFFFF;
		// box-shadow: 0rpx 3rpx 7rpx rgba(220, 220, 220, 0.35);
		border-radius: 10rpx;
		padding: 9rpx 0rpx;
		box-sizing: border-box;
		// margin-bottom: 58rpx;
		display: flex;
		align-items: center;
	
		&-data {
			flex: 1;
			display: flex;
	
			input {
				font-size: 26upx;
			}
		}
	}
	
	.inpBox .i {
		width: 3rpx;
		height: 29rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		background: #666666;
		display: inline-block;
		vertical-align: middle;
		margin-right: 25rpx;
	}
	
	.code {
		width: 170rpx;
		background: #F9F9F9;
		border-radius: 6rpx;
		border: 1px solid #0180FF;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 22rpx;
		color: #0180FF;
		display: inline-block;
		vertical-align: middle;
		height: 50upx;
		line-height: 50upx;
	}
	
	.code.disabled {
		border-color: #ccc;
		color: #666;
	}
	
	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	
		&-line {
			display: flex;
			position: relative;
			width: 100%;
	
			&-title {
				text-align: center;
				font-size: 38upx;
				color: #000;
				width: 100%;
			}
	
			&-icon {
				position: absolute;
				left: 45upx;
				display: flex;
				align-items: center;
			}
		}
	
		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
	}
	
	.upload {
		&-create {
			width: 295upx;
			height: 198upx;
			border-radius: 10upx;
			background-color: #e6e7e8;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.form {
		width: 100%;
		margin-top: 40upx;
	
		/deep/ .van-cell {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 7rpx rgba(220, 220, 220, 0.35);
			border-radius: 10rpx;
			padding: 9rpx 8rpx 9rpx 26rpx;
			box-sizing: border-box;
			margin-bottom: 58rpx;
			display: flex;
			align-items: center;
			margin-bottom: 0;
		}
	
		&-header {
			display: flex;
			align-items: center;
			padding-bottom: 25upx;
			border-bottom: 2upx solid #f6f6f6;
			margin-bottom: 30upx;
			justify-content: start;
			width: 100%;
	
			&-title {
				font-size: 40upx;
				color: #000000;
				font-weight: bold;
				margin-right: 10upx;
			}
	
			&-tag {
				width: 94upx;
				height: 30upx;
				line-height: 30upx;
				text-align: center;
				font-size: 20upx;
				color: #ffffff;
				border-radius: 14upx;
				background: linear-gradient(to right, #ff8300, #ffb700);
			}
		}
	
		&-main {
			background-color: #fff;
			padding: 30upx;
			border-radius: 8upx;
			box-sizing: border-box;
	
		}
	
	}
	
	
	.registerClient {
		width: 100%;
		background: #fff;
	}
	
	.textareaInp {
		min-height: 60px;
	}
	
	.title {
		width: 100%;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 16px;
		color: #000000;
		margin-bottom: 16px;
		padding-left: 5px;
		box-sizing: border-box;
		display: block;
	}
	
	.inp {
		width: 100%;
		background: #FFFFFF;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		box-sizing: border-box;
		margin-bottom: 23px;
	
	}
	
	.selectVant {
		width: 100%;
		background: #FFFFFF;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		position: relative;
		margin-bottom: 22px;
	}
	
	.selectVant::before {
		content: "";
		display: block;
		width: 20px;
		height: 16px;
		background-size: 100% 100%;
		position: absolute;
		top: 50%;
		margin-top: -9px;
		right: 15px;
		z-index: 1;
	}
	

	.textareaVant {
		width: 100%;
		max-height: 88px;
		background: #FFFFFF;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		box-sizing: border-box;
		margin-bottom: 22px;
		overflow: auto;
	}
	
	.mb10 {
		margin-bottom: 10px !important;
	}
	
	.inpBox {
		width: 100%;
		position: relative;
	}
	
	.inpBox canvas {
		width: 100%;
		height: 100%;
	}
	
	.graphicsCodeBox {
		width: 87px;
		height: 45px;
		box-sizing: border-box;
		position: absolute;
		right: 0;
		top: 0;
		padding: 5px;
		z-index: 99;
	}
	
	.getCodeBox {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		padding: 7px 10px 0 0;
		box-sizing: border-box;
		z-index: 2;
	}
	
	.getCodeBox .btn {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background: #F9F9F9;
		border-radius: 3px;
		border: 1px solid #0180FF;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 24upx;
		color: #0180FF;
		padding: 0 10upx;
		box-sizing: border-box;
	
		&.disabled {
			background-color: #f5f5f5;
			border-color: #eee;
			color: #666;
		}
	}
	
	.upImgBox {
		width: 100%;
		height: auto;
		overflow: hidden;
		position: relative;
		margin-bottom: 60px;
	}
	
	.uploadImage {
		width: 100%;
	}
	
	.uploadImage image {
		width: 100%;
	}
	
	.upBtn {
		width: 153px;
		height: 103px;
		background: #E6E7E8;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		text-align: center;
		line-height: 103px;
		font-size: 31px;
	}
	
	.submit {
		width: 100%;
		height: 42px;
		line-height: 42px;
		text-align: center;
		background: #0180FF;
		border-radius: 5px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 16px;
		color: #FFFFFF;
	}

	.genderCheckBox {
		width: 100%;
		margin-bottom: 23px;
	}
</style>